<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Pivot Grid - jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.autocomplete.js"></script>
</head>
<body>
<style type="text/css">
    .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
    .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
    .autocomplete-selected { background: #F0F0F0; }
    .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
    .autocomplete-group { padding: 2px 5px; }
    .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
</style>
<!--<div class="autocomplete-suggestions">-->
    <!--<div class="autocomplete-group"><strong>NHL</strong></div>-->
    <!--<div class="autocomplete-suggestion autocomplete-selected">...</div>-->
    <!--<div class="autocomplete-suggestion">...</div>-->
    <!--<div class="autocomplete-suggestion">...</div>-->
<!--</div>-->
<input type="text" name="country" id="autocomplete"/>
<script type="text/javascript">
    var countries = [
        { value: 'Andorra', data: 'AD' },
        // ...
        { value: 'Zimbabwe', data: 'ZZ' }
    ];

    $('#autocomplete').autocomplete({
        lookup: countries,
        onSelect: function (suggestion) {
//            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            console.log(suggestion);
        }
    });
</script>
</body>
</html>